<template>
  <!-- <cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="false">
        <block slot="backText">返回</block>
        <block slot="content">直播间1</block>
      </cu-custom> -->
  <view>
    <video
      id="video"
      style="width: 100%"
      :style="isCover ? 'width:100%;hight:100%;' : ''"
      src="https://v-cdn.zjol.com.cn/276990.mp4"
      poster="https://img1.baidu.com/it/u=3065838285,2676115581&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691168400&t=e272cbd97e007e483ca2272759261756"
      :show-center-play-btn="false"
      @loadedmetadata="loadeddata"
      :enable-progress-gesture="false"
      :muted="notification"
      :direction="0"
      :controls="controls"
      v-if="isHide"
    >
      <view class="tool" @tap.stop="tool">
        <view class="play">
          <text
            class="cuIcon-playfill play-icon"
            v-if="!isPlay"
            @tap.stop="play"
          ></text>
          <text
            class="cuIcon-stop play-icon"
            v-if="isShowTool"
            @tap.stop="stop"
          ></text>
        </view>
        <view class="cover" v-if="isShowTool">
          <text
            class="cuIcon-notificationforbidfill full"
            v-if="notification"
            @tap.stop="sound(false)"
            style="margin-right: 20rpx"
          ></text>
          <text
            class="cuIcon-notificationfill full"
            @tap.stop="sound(true)"
            v-else
            style="margin-right: 20rpx"
          ></text>
          <text @tap.stop="cover" class="cuIcon-full full"></text>
        </view>
      </view>
    </video>
  </view>
</template>
<script>
const app = getApp();

export default {
  data() {
    return {
      theme: app.globalData.theme, //全局颜色变量
      duration: 0,
      videoContext: null,
      durationTime: 0,
      time: 0,
      controls: false,
      isPlay: false,
      isShowTool: false,
      isCover: false,
      viewDirection: "2",
      //   isHide: true,
      notification: false,
    };
  },
  props: {
    isHide: {
      type: Boolean,
      default: false,
    },
  },
  onShow() {
    console.log("created");
    this.$nextTick(() => {
      this.isHide = true;
    });
  },
  mounted() {
    this.videoContext = uni.createVideoContext("video");
    console.log(this.videoContext, "videoContextvideoContextvideoContext");

  },
  onHide() {
    this.$nextTick(() => {
      this.stop();
      this.isHide = false;
    //   this.isCover = false;
    });
  },
  methods: {
    init() {
      this.videoContext = uni.createVideoContext("video");
    },
    sound(e) {
      console.log(e);
      this.notification = e;
    },
    tool() {
      if (this.isPlay) {
        this.isShowTool = !this.isShowTool;
      }
    },
    loadeddata(e) {
      this.durationTime = e.detail.duration;
    },
    stop() {
      this.videoContext.pause();
      this.isPlay = false;
      this.isShowTool = false;
    },
    play() {
      this.isPlay = true;
      this.isShowTool = true;
      let strTime = new Date("2023-08-04 09:08").getTime();
      let date = new Date().getTime();
      this.time = ((date - strTime) / 1000).toFixed(0);
      console.log(this.time, "1111111111111s");
      setTimeout(() => {
        this.videoContext.play();
        this.videoContext.seek(this.time - 0);
      }, 1000);
    },
    cover() {
      if (this.isCover) {
        this.videoContext.exitFullScreen();
        this.isCover = false;
      } else {
        if (this.viewDirection == 2) {
          this.videoContext.requestFullScreen({ direction: 90 });
        } else {
          this.videoContext.requestFullScreen({ direction: 0 });
        }
        this.isCover = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tool {
  width: 100%;
  height: 100%;
}
#video {
  position: relative;
}
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .play-icon {
    color: #fff;
    font-size: 80rpx;
  }
}
.cover {
  position: absolute;
  right: 40rpx;
  bottom: 30rpx;
  .full {
    font-size: 60rpx;
    color: #fff;
  }
}
</style>
